<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/components.esm.js"></script>
    <script nomodule src="/build/components.js"></script>
  </head>
  <body>
    <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>

    <s-panel titles="进度条组件">
      <s-progress>22</s-progress>
    </s-panel>
    
    <s-panel titles="弹窗组件">
      <s-button id="d">弹窗</s-button>
      <s-dialog effect="zoomdown" titles="友情提示！" content="夜已深了，快睡觉吧！" footer="['取消', '确定']"></s-dialog>
      <script>
        document.querySelector('#d').addEventListener('click', e => {
          var dialog = document.querySelector('s-dialog')
          dialog.visible = true
          dialog.addEventListener('onHide', data => {
            console.log(data)
          })
        })
      </script>
    </s-panel>

    <s-panel titles="按钮组件">
      <s-button>测试按钮</s-button>
      <s-button type="primary" outline>按钮</s-button>
      <s-button type="primary" shape="conner">按钮</s-button>
      <s-button type="primary" shape="rounder">按钮</s-button>
      <s-button type="danger" outline>按钮</s-button>
      <s-button type="danger" shape="conner" outline>按钮</s-button>
      <s-button type="danger" shape="rounder" outline>按钮</s-button>
    </s-panel>

    <s-panel titles="图标组件">
      <s-icons></s-icons>
      <s-icon-add-user color="red"></s-icon-add-user>
    </s-panel>

    <s-panel titles="图片组件">
      <div class="image-container">
        none
        <s-image fit="none" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c259411.jpeg"></s-image>
        contain
        <s-image fit="contain" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></s-image>
        cover
        <s-image fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></s-image>
        fill
        <s-image fit="fill" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></s-image>
        scale-down
        <s-image fit="scale-down" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></s-image>
      </div>
    </s-panel>
  </body>
</html>
